<template>
  <!--课程列表-->
  <view class="page-content">
    <!--#ifdef H5-->
    <wTit
        left-icon="arrowleft"
        background="#F5F7FA"
        color="#666"
        leftText="返回"
        @clickLeft="clickl"
        fontsize="32" />
    <!--#endif-->
    <scroll-view class="page-box" :scroll-top="scrollTop" scroll-y="true" @scrolltolower="loadmore()"> <!--@scrolltolower="loadmore()"-->
<!--      <template v-if="datalist && datalist.length > 0">-->
        <view class="page-table">
          <t-table class="t-tables" border="1" border-color="#EBEEF5" :is-check="false" @change="change">
            <t-tr class="t-trs" font-size="13" color="#2b2b2b" align="center">
              <t-th class="t-ths" align="center">细项类别</t-th>
              <t-th class="t-ths" align="center">单价</t-th>
              <t-th class="t-ths" align="center">数量</t-th>
              <t-th class="t-ths" align="center">总价</t-th>
              <t-th class="t-ths" align="center">验收材料</t-th>
            </t-tr>
            <t-tr class="t-trs" font-size="12" color="#5d6f61" align="right" v-for="item in datalist" :key="item.id">
              <t-td class="t-tds" align="center">{{ item.project_category }}</t-td>
              <t-td class="t-tds" align="center">{{ item.price }}</t-td>
              <t-td class="t-tds" align="center">{{ item.number }}</t-td>
              <t-td class="t-tds" align="center">{{ item.subtotal }}</t-td>
              <t-td class="t-tds" align="center">
                <view class="t-button"
                      :class="item.check_img.length === 0?'t-button-on':'t-button-no'"
                      @click="upload(item.id,item.check_img,item.activity_id)">
                  {{ item.check_img.length === 0?'待上传':'已上传:' + item.check_img.length}}
                </view>
              </t-td>
            </t-tr>
          </t-table>
        </view>
<!--      </template>-->
<!--      <empty v-else no-full type="noData"></empty>-->
    </scroll-view>
  </view>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import  store  from '@/store'
import loadMore from '@/components/uni-load-more/load-more.vue';
import { getwechatactivitytwolists } from '@/api/index'
import tTable from '@/components/t-table/t-table.vue';
import tTh from '@/components/t-table/t-th.vue';
import tTr from '@/components/t-table/t-tr.vue';
import tTd from '@/components/t-table/t-td.vue';
import wTit from "@/components/w-tit/w-tit.vue"
export default {
  name: "index-list",
  components: {
    loadMore,
    tTable,
    tTh,
    tTr,
    tTd,
    wTit
  },
  data() {
    return {
      scrollTop: 0,
      datalist:[],
      formdata:{
        page:1,
        limit:999,
        activity_id:'',
        keyword:'',
        openid:''
      },
      noData:false,
      load_more: '', //下拉加载文字
    };
  },
  computed: {
    ...mapGetters(['userInfo','code','openid'])
  },
  onShow() {
    this.getListData();
  },
  onLoad(option) {
    console.log(123,option)
    if(option.id){
      this.formdata.activity_id = option.id
    }
    //this.getListData();
  },
  methods: {
    ...mapActions('user',['setUserInfo','setCode','setOpenid']),
    //#ifdef H5
    clickl(){
      uni.navigateTo({url: "/pages/index/index"});
    },
    //#endif
    //下拉加载
    loadmore(){
        console.log('下拉加载');
        let _self = this;
        _self.formdata.page++;
        this.getListData()
    },
    upload(id,check_img,activity_id){
      console.log(66666,check_img)
      uni.navigateTo({url: '/pages/costList/upload_detail?id='+id+'&check_img='+check_img.join('_')+'&activity_id='+activity_id});
    },
    // 获取列表数据
    getListData(){
      this.formdata.openid = this.openid
      getwechatactivitytwolists(this.formdata).then(res => {
        console.log(222,res)
        if(this.formdata.page===1){
          if(res.code===1){
            let resData = res.data.data;
            if (resData && resData.length < 10) {
              this.load_more = '没有更多了'
              this.datalist = resData
            } else {
              this.load_more = '加载中...',
                  this.datalist = resData
            }
            console.log(444,this.datalist)
          }
        }else {
          if(res.code===1){
            let resData = res.data.data;
            if (resData && resData.length < 10) {
              this.load_more = '没有更多了'
              this.datalist = this.datalist.concat(resData)
            } else {
              this.load_more = '加载中...',
                  this.datalist = this.datalist.concat(resData);
            }
            console.log(444,this.datalist)
          }
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.t-tables{
  width: 100%;
  display: flex;
  flex-direction: column;
  .t-trs{
    display: flex;
    .t-tds,.t-ths{
      width: 138rpx;
      display: flex;
      align-items: center;
    }
  }
  .t-trs .t-tds:nth-of-type(4),.t-trs .t-ths:nth-of-type(4){
    width: 145rpx;
  }
  .t-trs .t-tds:nth-of-type(3),.t-trs .t-ths:nth-of-type(3){
    width: 120rpx;
  }
  .t-trs .t-tds:nth-of-type(2),.t-trs .t-ths:nth-of-type(2){
    width: 145rpx;
  }
  .t-trs .t-tds:nth-of-type(1),.t-trs .t-ths:nth-of-type(1){
    width: 150rpx;
  }
  .t-trs .t-tds:nth-last-child(1),.t-trs .t-ths:nth-last-child(1){
    width: 130rpx;
  }
}
.t-tables::-webkit-scrollbar {
  display: none;
  /* #ifdef MP-WEIXIN */
  width: 0;
  height: 0;
  /* #endif */
}
.t-button{
  height: 52rpx;
  width: 106rpx;
  border-radius: 10rpx;
  font-size: 24rpx;
  line-height: 52rpx;
  text-align: center;
}
.t-button-on{
  background: #FF4545;
  border: 1rpx solid #FF4545;
  color: #fff;
}
.t-button-no{
  background: #fff;
  border: 1rpx solid #4566FF;
  color: #4566FF!important;
}
.page-box{
  display: flex;
  width: 100%;
  margin-top: 10rpx;
  height:calc(100% - 90rpx);
  .page-table{
    display: flex;
    margin: 30rpx;
    width: calc(100% - 60rpx);
    overflow: hidden;
  }
}
.list-ul{
  display: flex;
  flex-direction: column;
  margin: 30rpx;
  .det-con-more {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10rpx;
    color: #999;
    font-size: 26rpx;
  }
  .list-li{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 36rpx 30rpx;
    background: #FFFFFF;
    box-shadow: 0rpx 3rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
    border-radius: 10rpx;
    margin-bottom: 30rpx;
    .list-li-l{
      display: flex;
      .list-tit{
        font-size: 32rpx;
        font-weight: bold;
      }
    }
    .list-li-r{
      display: flex;
    }
  }
}
</style>